<template>
  <div style="width: 100%">
    <el-table :data="orderList" :header-cell-style="{'text-align':'center'}" ref="table"
              :cell-style="{'text-align':'center'}">
      <el-table-column prop="id" label="id" width="100"/>
      <el-table-column prop="userId" label="用户id" width="100"/>
      <el-table-column prop="courtId" label="场地id" width="100"/>
      <el-table-column prop="date" label="日期" width="100"/>
      <el-table-column prop="time" label="时间段" width="100"/>
      <el-table-column prop="amount" label="实际支付金额" width="150"/>
      <el-table-column prop="paymentMethod" label="支付方式" width="100"/>
      <el-table-column label="状态" width="100">
        <div slot-scope="scope">
          <span v-if="scope.row.status===0">已取消</span>
          <span v-if="scope.row.status===1">待支付</span>
          <span v-if="scope.row.status===2">已支付</span>
          <span v-if="scope.row.status===3">已完成</span>
        </div>
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="100"/>
      <el-table-column prop="paymentTime" label="支付时间" width="100"/>
      <el-table-column prop="created" label="创建时间" width="100"/>
      <el-table-column prop="updated" label="更新时间" width="100"/>
      <el-table-column prop="sort" label="序号" width="100"/>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "orderList",
  data() {
    return {
      orderList: []
    }
  },
  methods: {
    loadOrder() {
      let url = "http://localhost:9999/zx-order/booking/list"
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
      ).get(url).then((response) => {
        let result = response.data
        if (result.state === 200) {
          result = result.data;
          this.orderList = result;
        }
      })
    }
  },
  mounted() {
    this.loadOrder();
    this.$message({message:"警告：订单为用户在本站的虚拟财产，未经用户允许，严禁修改、删除",type:"warning",duration:5000})
  }
}
</script>

<style scoped>

</style>